使用Core Graphics绘画一个山寨微信icon

先看最终效果：

绘画这个纯属周末雨天无聊，这里使用的都是Core Graphics上很基本的几个方法，对新手来说还是有帮助的。下面说下这个绘制过程。

  1. 设置背景色
  2. 绘制绿色椭圆
  3. 绘制绿色三角形
  4. 绘制眼睛
  5. 绘制白色椭圆
  6. 绘制白色三角形
  7. 绘制眼睛
  8. 就这么简单

那么，省去创建project的步骤之后我们要做的就是自定义个UIView子类，我们就将它命名为WechatView，然后在storyboard上拖动一个UIView到视图控制器上。

接着，为了在绘制过程中能不需要每次都编译，我们可以使用iOS7之后的一个新特性 IB_DESIGNABLE 来时时看到我们的绘画过程。说到 IB_DESIGNABLE 就自然的会联想到 IBInspectable，先浅陋的介绍一下这两个的作用。首先是 IB_DESIGNABLE，如刚才所说，它可以让我们时时的看到我们的绘制过程，大大的省去了我们编译的时间，是iOS7上一个超赞的新特性。然后是 IBInspectable，它是添加在属性上的，在属性上添加上它我们就可以在Xcode的右边的Show the Attributes inspector上看到，并可以自定义这些值（当然，并不是所有的类习惯都支持的，具体有哪些，需要的时候试试便知哈）。
回到正题，现在我们只需要将 IB_DESIGNABLE 添加到WechatView 的头文件上即可（当然，你想添加到.m文件上编译器也不反对）。然后，在这里就添加一个用处不大的属性bkColor作为背景颜色，如下代码：

1
2
3
4
IB_DESIGNABLE
@interface WechatView : UIView
@property(nonatomic, assign)IBInspectable UIColor *bkColor;
@end

这样，我们就可以在点击storyboard后，选择Show the Identity inspector上看到下图:

在Show the Attributes inspector上看到下图：

现在改变一下bkColor,将它改为灰色。

改后当然是看不到视图改变的，我们得真正的为 backgoundColor 这个属性赋值；或者使用Core Graphices来填充背景。方法一中如果想时时看到改变效果，我们可以添加如下代码：

1
2
3
4
- (void)prepareForInterfaceBuilder {
  [super prepareForInterfaceBuilder];
  self.backgroundColor = self.bkColor;
}

代码刚上，效果即可见哈，爽

prepareForInterfaceBuilder 这个方法是iOS8之后才有的，它就是提供给我们试试查看效果的，但是它只是在当你的view准备被绘制在Interface Builder时被执行，换句话说就是程序运行时它是不被调用的。==command+r==运行下程序我们就可以发现，这是的view背景并不是刚才所看到的灰色。说明prepareForInterfaceBuilder确实没有被调用。（我们可以通过这个方法，省去编译时间来看我们的绘制效果，然后再将代码移到我们所要的位置）。这个方法就说到这。

填充背景

还有方法二，也是接下来我们要用到的方法:使用Core Graphices来填充背景。将前面的代码注释掉，然后添加如下代码：

1
2
3
4
5
6
7
8
- (void)drawRect:(CGRect)rect {
  CGContextRef context =UIGraphicsGetCurrentContext();
  /*0. 填充背景*/
  //将当前context的颜色填充为bkColor
  [self.bkColor setFill];
  //填充颜色到当前的context上，大小为rect
  CGContextFillRect(context, rect);
}

同样，可以看到WechatView的背景变成了灰色。这样就算开始了第0步绘画。

绘制绿色椭圆

第1步是开始绘制绿色椭圆，在以上的代码基础上继续添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//绘制的最小宽度
CGFloat minWidth = MAX(160, rect.size.width);
//定义绿色椭圆位置和大小
CGFloat greenX = 10;
CGFloat greenY = 10;
CGFloat greenCircleWidth = minWidth/1.5;
CGFloat greenCircleHeight = 21.0/24 * greenCircleWidth;
CGFloat gcW = greenCircleWidth;
CGFloat gcH = greenCircleHeight;
//1. 绘制绿色椭圆
UIColor *greenColor = RGB(125, 225, 73, 1);
//将当前context的颜色填充为greenColor
[greenColor setFill];
//绘制并填充椭圆
CGContextFillEllipseInRect(context, CGRectMake(greenX, greenY, greenCircleWidth, greenCircleHeight));

完成了第1步，效果见图：

绘制绿色三角形

第2步：绘制绿色三角形。通过观察微信的icon，计算，微调，我们可以添加以下的代码来绘制这个三角形：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//2. 画三角形
//椭圆左边焦点
CGFloat greenCircleFocusLeft = gcW/2-sqrt(pow(gcW/2, 2)-pow(gcH/2, 2));
//椭圆右边焦点
CGFloat greenCircleFocusRight = gcW/2+sqrt(pow(gcW/2, 2)-pow(gcH/2, 2));
CGFloat gcFL = greenCircleFocusLeft;
CGFloat gcFR = greenCircleFocusRight;
//眼睛大小
CGFloat eyesWidth1 = gcW/7.5;
//2. 画三角形
CGPoint points[] = {
CGPointMake(gcFL-eyesWidth1, greenY + gcH + (gcFL-eyesWidth1)/12-10),
CGPointMake(greenX+gcW/2+40, 1.2*(greenX+gcW/2) + greenY),
CGPointMake(gcFL+10, 1.8*gcFL + greenY)};
CGContextAddLines(context, points, 3);
CGContextClosePath(context);
//CGContextStrokePath(context);
CGContextFillPath(context);

三角形的三个点的计算花了我不少时间，但是这不是重点，重点是其实很简单的问题我却傻X的花了很长时间哈，而且最终还只是凑合的，不是最优解。取消CGContextStrokePath(context);这句的注释，我们可以看到下图：

注释掉后即可看到：

绘制眼睛

第3步：绘制眼睛。眼睛的位置取的是椭圆焦点的位置，而且绘制后看起来还挺对的。眼睛无非是两个黑色的圆形。如下：

1
2
3
4
//3. 画眼睛（圆）
[RGB(45, 49, 32, 1) setFill];
CGContextFillEllipseInRect(context, CGRectMake(greenX + gcFL, greenY+gcH/4, eyesWidth1, eyesWidth1));
CGContextFillEllipseInRect(context, CGRectMake(greenX + gcFR-eyesWidth1, greenY+gcH/4, eyesWidth1, eyesWidth1));

然后就是这样了：

绘制白色icon

第4，5，6步跟1，2，3步基本是一样的，只是位置不同而已。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//4. 画白色椭圆
CGFloat wcX = greenX + gcW / 2;
CGFloat wcY = greenY + gcH / 2;
CGFloat wcW = gcW * 0.8;
CGFloat wcH = gcH * 0.8;
CGFloat whiteCircleFocusLeft = wcW/2-sqrt(pow(wcW/2, 2)-pow(wcH/2, 2));
CGFloat whiteCircleFocusRight = wcW/2+sqrt(pow(wcW/2, 2)-pow(wcH/2, 2));
CGFloat wcFL = whiteCircleFocusLeft;
CGFloat wcFR = whiteCircleFocusRight;
CGFloat eyesWidth2 = wcW/7.5;
UIColor *whiteColor = RGB(251, 251, 251, 1);
[whiteColor setFill];
CGContextFillEllipseInRect(context, CGRectMake(wcX, wcY, wcW, wcH));
//5. 画白色三角形
CGPoint whiteTrianglePoints[] = {
CGPointMake(wcFR+eyesWidth2/4+wcX, wcY + wcH + (wcFL-eyesWidth2/4)/4),
CGPointMake(wcX+wcW/2, 0.9*(wcX+wcW/2)),
CGPointMake(wcFR+eyesWidth2, 0.9*wcFR + wcY)};
CGContextAddLines(context, whiteTrianglePoints, 3);
CGContextClosePath(context);
CGContextFillPath(context);
//6. 画眼睛（圆）
[RGB(60, 64, 49, 1) setFill];
CGContextFillEllipseInRect(context, CGRectMake(wcX + wcFL, wcY + wcH/4, eyesWidth2, eyesWidth2));
CGContextFillEllipseInRect(context, CGRectMake(wcX + wcFR - eyesWidth2, wcY + wcH/4, eyesWidth2, eyesWidth2));

OK,现在就长这样了，咋一看还是挺像的哈。

添加阴影

下面我们再添加一些细节上的东西。比如我们发现少了阴影，还有微信的icon上的三角形是圆角的。首先是阴影：在CGFloat minWidth = MAX(160, rect.size.width);这句之上加上下面的代码：

1
2
//阴影
CGContextSetShadowWithColor(context, CGSizeMake(-0.5, 0.5), 6, [UIColor blackColor].CGColor);

阴影是加上了，但是并不是我们想要的效果。怎样才能让它只是在边缘上加阴影呢？也很简单，继续在刚才添加的语句下添加：

1
CGContextBeginTransparencyLayer(context, nil);

搞定，感觉还行哈，不过眼睛的阴影好像也没了。试试用同样的方法看能不能解决：在第3步画眼睛之前添加：

1
2
3
CGContextEndTransparencyLayer(context);
//为绿色椭圆的眼睛添加阴影
CGContextSetShadowWithColor(context, CGSizeMake(-0.5, 0.5), 2, [UIColor blackColor].CGColor);

然后在第3步画完眼睛之后添加：

1
CGContextBeginTransparencyLayer(context, nil);

再然后在第6步画眼睛之前添加上：

1
2
//为白色椭圆的眼睛添加阴影
CGContextSetShadowWithColor(context, CGSizeMake(-0.5, 0.5), 2, [UIColor blackColor].CGColor);

这样说有点乱，注意到了：CGContextBeginTransparencyLayer(context, nil) 和 CGContextEndTransparencyLayer(context) 是成对出现的，从函数名称可以知道它们的作用分别是开始一个透明的layer和结束一个透明的layer。而夹在它们中间的绘图操作在指定的context上被合成到一个完全透明的背景(在context中作为一个分离的目标缓冲区)。这个操作会保持context原有的裁剪区域。调用了Begin之后除了1.全局的透明度被设置为1；2.阴影被屏蔽外，其他的都不变。这样解释后，上面的代码应该可以理解了。现在我们的icon看起来是这样的：

圆角三角形

最后，解决下圆角三角形的问题：回到第2步，将CGContextFillPath(context);注释，并添加以下代码：

1
2
3
4
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, 4);
CGContextSetStrokeColorWithColor(context, greenColor.CGColor);
CGContextDrawPath(context, kCGPathFillStroke);

然后同理在第5步画白色三角形上注释CGContextFillPath(context);,并添加以下代码：

1
2
3
4
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, 3);
CGContextSetStrokeColorWithColor(context, whiteColor.CGColor);
CGContextDrawPath(context, kCGPathFillStroke);

好了，废话说完了，也算是完成了，最终效果：

实际上，微信的icon的颜色还是一个渐变的，在这里就不继续研究了，要实现渐变可以用*CGContextDrawLinearGradient(CGContextRef context, CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint, CGGradientDrawingOptions options)*或*CGContextDrawRadialGradient(CGContextRef context, CGGradientRef gradient, CGPoint startCenter, CGFloat startRadius, CGPoint endCenter, CGFloat endRadius, CGGradientDrawingOptions options)*这两个函数。
bug 修复
command+r 编译+运行以下（现在才需要编译，这也太好了吧），然后发现成功的crash了。

什么原因？好吧，我把属性定义成 assign 了（低级错误），改成strong ，问题解决。

结束语

以上就是我绘制的整个编码过程，绘制微信icon实际上就用了core graphics的几个基本功能，希望能对初学者有所帮助，说错的地方也希望能得到指点哈~~
源码地址：https://github.com/linshaolie/blog/tree/master/DrawWechatIcon